<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟滚动条</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#gdt{
				background: #f5f5f5;
			}
			#gdtN{
				background:#f00;
				border-radius: 4px;
			}
		</style>
	</head>
	<body>
		<div id="main" style="padding-left:50px;position: relative;height:100px;width: 200px;margin: 50 auto;background: #ddd;overflow:hidden;">
			<ul class="action" style="position:absolute;width: 100%;">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ul>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			scrollY("#main",".action")
			function scrollY(main,cont){
				var contH = $(cont).height();//内容区域的高度
				var mainH = $(main).height();//外层的高度
				console.log(contH);console.log(mainH);
				console.log(contH>mainH);
				var $cont = $(cont);//内容区域
			    var $wrap = $(main);//外层
				if(contH>mainH){
					var html = '<div id="gdt" style="position:absolute;right:0;top:0;width: 10px;height:100%;">'+
									'<div id="gdtN" style="position:absolute;right:2px;width: 6px;"></div>'+
								'</div>';
					$wrap.append(html);
				}
				
				var scrollH = $("#gdt").height();
			    var $scrollBar = $('#gdtN');//滚动条部分
			    var $wrapScrollBar = $('#gdt');//包裹滚动条部分
			    //设置滚动按钮宽度
			    $scrollBar.height(mainH * mainH / contH);
			 
			    var $sw = $scrollBar.height();//滚动条的初始高度；
			    var disY = 0;//初始的top值
			 
			    //滚动条拖动事件
			    $scrollBar.mousedown(function(event) {
			        disY = event.pageY - $(this).position().top;
			        if (this.setCapture) {
			            $(this).mousemove(function(event) {
			                fnChangePos(event.pageY - disY);
			            });
			            this.setCapture(); //设置捕获范围
			            $scrollBar.mouseup(function() {
			                $(this).unbind('mousemove mouseup');
			                this.releaseCapture(); //取消捕获范围
			            });
			        } else {
			            $(document).mousemove(function(event) {
			                fnChangePos(event.pageY - disY);
			            });
			            $(document).mouseup(function() {
			                $(document).unbind('mousemove mouseup');
			            });
			        }
			        return false;
			    });
			    function fnChangePos(data) {
			        if (data < 0) data = 0;
			        else if (data > (mainH - $sw)) data = mainH - $sw;
			        $scrollBar.css('top', data);
			        $cont.css('top', -(contH - mainH) * data / (mainH - $sw));
			    }
			 
			    //鼠标在滚动条上点击或滚动滚轮单次移动的距离
			    var sMoveDis = 50;
			    //滚动条单击事件注册
			    $wrapScrollBar.click(function(event) {
			        var relDisY = event.pageY - $(this).offset().top;
			        if (relDisY > ($scrollBar.position().top + $sw)) {
			            fnChangePos($scrollBar.position().top + sMoveDis)
			        } else if (relDisY < $scrollBar.position().top) {
			            fnChangePos(($scrollBar.position().top - sMoveDis))
			        };
			    });
			    //阻止事件冒泡
			    $scrollBar.click(function(event) {
			        event.stopPropagation();
			    });
			 
			    //滚动条鼠标滚轮事件注册
			    if ($wrap[0].addEventListener) {  //for firefox
			        $wrap[0].addEventListener("DOMMouseScroll", fnMouseWheel);
			    }
			    $wrap[0].onmousewheel = fnMouseWheel; // for other browser
			     
			    //鼠标滚轮事件处理函数
			    function fnMouseWheel(e) {
			        var evt = e || window.event;
			        var wheelDelta = evt.wheelDelta || evt.detail; //鼠标滚动值，可由此判断鼠标滚动方向
			        if (wheelDelta == -120 || wheelDelta == 3) fnChangePos($scrollBar.position().left + sMoveDis);
			        else if (wheelDelta == 120 || wheelDelta == -3) fnChangePos($scrollBar.position().left - sMoveDis);
			    }
 			}
		})
	</script>
</html>
